<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <title>vue</title>
    <style type="text/css">
    	#mycanvas{
    		width: 600px;height: 300px;
    		background-color: orange;text-align: center;
    	}
    </style>
</head>
<body>
	<!-- 000.指定Vue作用域 -->
    <div id="vue-app">
        <!-- 001.调用对象属性 -->
        <h1>{{ name }}</h1>
        <!-- 002.调用自定义方法并传个值，此处必须得有括号 -->
        <p>{{ music('唱') }}</p>
        <!-- 00301.属性绑定，借助 v-bind 修饰符实现数据插入 -->
        <a v-bind:href="website" title="">绿绿峰个人网站</a>
        <!-- 00302.属性绑定，借助 v-html 修饰符输出数据内的dom元素 -->
        <p v-html="tag"></p>
        <!-- 00401.事件，借助 v-on: 修饰符指定事件 -->
        <p>绿绿峰的岁数是：{{ age }}</p>
        <button type="button" v-on:click="add">过了一年</button>  <!-- 一般使用这种指定方法的形式 -->
        <button type="button" @click="age--">越来越回旋</button>  <!-- 使用@可以代替 v-on: -->
        <button type="button" v-on:dblclick.once="age='over'">挂了</button>  <!-- .once代表只可以执行一次 -->
        <!-- 00402.鼠标移动事件 -->
        <div id="mycanvas" v-on:mousemove="getXY">{{ x }},{{ y }}-
        	<span v-on:mousemove="stopMove">停一下</span>
        	<span v-on:mousemove.stop="">再停一下</span>  <!-- Vue内置阻止事件冒泡的方法 -->
        	<a v-bind:href="website" v-on:click.prevent="lalala()">绿绿峰的网站，正在维修</a><!-- .prevent方法阻止默认事件 -->
        </div>
        <!-- 005.键盘事件,也可以组合指定键子使用，例如 keyup.alt.enter 【按住alt和回车之后触发方法】 -->
        <input type="text" v-on:keyup="myname" name="" value="" placeholder="键盘动作，则控制台输出" />
        <!-- 006.双向数据绑定，一般用于 input select textarea  ref指定当前标签的标记 -->
        <input type="text" ref="talk_content" v-on:keyup.enter="talk"  name="" value="" placeholder="输入后回车发送" />
        <!-- 00602.更简单的方法，直接用v-model来实现绑定指定属性 -->
        <input type="text" v-model="name"  name="" value="" placeholder="绑定name属性" />
        <p>{{conts}}</p>
        <a href="vue_02.html" title="">下一页示例</a>
    </div>
    <script type="text/javascript">
    // 001.实例化Vue对象
    new Vue({
        el: "#vue-app",
        data: {
            name: "绿绿峰啊",
            website: "http://www.lvlvfeng.top",
            tag: "<button>我是个按钮</button>",
            age: 22,
            x: 0,
            y: 0,
            conts: ""
        },
        methods: {
            music: function(sing) {
            	// this.name this关键字可以获得当前实例的Vue对象属性
                return this.name + sing + "国歌";
            },
            add: function(){
            	this.age++;
            },
            getXY: function(event){
            	// event是鼠标事件对象，包含很多数据 
            	this.x = event.offsetX;
            	this.y = event.offsetY;
            },
            stopMove: function(event){
            	event.stopPropagation(); // 阻止冒泡事件，也就是说停止数据变化
            },
            lalala: function(){
            	alert("点击无效~");
            },
            myname: function(){
            	console.log("您输入了内容");
            },
            talk: function(){
            	this.conts = this.$refs.talk_content.value;
            }
        }
    });

    /**
     * el 指定dom元素
     * data 数据存储
     * methods 指定方法
     */

    </script>
</body>
</html>